<div id="carousel-banner{{ module }}" class="carousel slide{% if effect == 'fade' %} carousel-fade{% endif %}" data-bs-ride="carousel">
  {% if indicators and banners|batch(items)|length > 1 %}
    <ol class="carousel-indicators">
      {% set banner_row = 0 %}
      {% for banner in banners|batch(items) %}
        <li data-target="#carousel-banner{{ module }}" data-slide-to="{{ banner_row }}"></li>
        {% set banner_row = banner_row + 1 %}
      {% endfor %}
    </ol>
  {% endif %}
  <div class="carousel-inner">
    {% for carousel in banners|batch(items) %}
      <div class="carousel-item">
        <div class="row justify-content-center">
          {% for banner in carousel %}
            <div class="col-{{ (12 / items)|round(floor) }} text-center">
              {% if banner.link %}
                <a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-fluid"/></a>
              {% else %}
                <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-fluid"/>
              {% endif %}
            </div>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>
  {% if controls and banners|batch(items)|length > 1 %}
    <a href="#carousel-banner{{ module }}" class="carousel-control-prev" data-slide="prev"><span class="fa fa-chevron-left"></span></a> <a href="#carousel-banner{{ module }}" class="carousel-control-next" data-slide="next"><span class="fa fa-chevron-right"></span></a>
  {% endif %}
</div>
<script type="text/javascript"><!--
$('#carousel-banner{{ module }} .carousel-indicators li:first').addClass('active');
$('#carousel-banner{{ module }} .carousel-inner .carousel-item:first').addClass('active');

$('#carousel-banner{{ module }}').carousel({
	ride: 'carousel',
	interval: {{ interval|escape('js') }},
	wrap: true
});
//--></script>
